<template>
  <div>
   <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
      <span style="margin-right: 20px; font-weight: bold;">精细化天气预报</span>
      <span style="margin-right: 20px;">|</span>
      <span style="display: flex; align-items: center;">
        <span>7天预报</span>
      </span>
    </div>
  <div class="contain">
    <div class="header">
      <span class="title">七日天气预报 {{ currentDate }}&nbsp;时次</span>
      <template v-if="county === '雅安'">
        <el-select v-model="selectedCity" placeholder="选择城市">
          <el-option
            v-for="city in cities"
            :key="city.value"
            :label="city.label"
            :value="city"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="queryForecast" class="query-button">查询</el-button>
      </template>
      <template v-else>
        <el-menu
  v-if="tabs.length > 0"
  :default-active="activeTab"
  class="el-submenu-demo"
  mode="horizontal"
  @select="handleTabSelect"
>
  <el-menu-item
    v-for="tab in tabs"
    :key="tab.name"
    :index="tab.name"
  >
    {{ tab.label }}
  </el-menu-item>
</el-menu>

      </template>
    </div>
    

    <div class="weather-info">
      <div v-for="(weather, index) in weatherData.weatherNight" :key="index" class="weather-item">
        <img :src="getWeatherIcon(weather)" class="weather-icon" />
        <div>{{ nextSevenDays[index] }}</div>
        <div>{{ weatherData.temperatureLowest[index] }}°C ~ {{ weatherData.temperatureHighest[index] }}°C</div>
        <div>{{ weather }}</div>
      </div>
    </div>

    <div id="forecast-chart"></div>
  </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import Request from "@/utils/request";
import * as echarts from 'echarts';
import 'element-ui/lib/theme-chalk/index.css';
import { Row, Col, Card, Select, Option, Button, Tabs, TabPane } from 'element-ui';
import { getList } from "@/views/home/refined_weather/7dList.js";

export default {
  name: 'sevendays_forecast',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [Select.name]: Select,
    [Option.name]: Option,
    [Button.name]: Button,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane
  },
  data() {
    return {
      county: Cookies.get('county'),
      station_user:Cookies.get('station_user'),
      chart: null,
      tabs: [],
      activeTab: '1',
      selectedCity: { value: 'yaan', label: '雅安' },
      selectedTab: '1',
      cities: [
        { value: 'mingshan', label: '名山' },
        { value: 'tianquan', label: '天全' },
        { value: 'baoxing', label: '宝兴' },
        { value: 'hanyuan', label: '汉源' },
        { value: 'lushan', label: '芦山' },
        { value: 'shimian', label: '石棉' },
        { value: 'yingjing', label: '荥经' },
        { value: 'yaan', label: '雅安' }
      ],
      currentDate: new Date().toLocaleDateString() + ' 20:00:00',
      nextSevenDays: [],
      weatherData: {
        weatherNight: [],
        temperatureHighest: [],
        temperatureLowest: []
      }
    };
  },
  mounted() {
    this.setNextSevenDays();
    this.setTabs();
    this.initChart();
    this.queryForecast();
    if (this.county && this.station_user) {
    const list = getList(this.county); 
    this.tabs = list; 
  };
  },
  methods: {
    setTabs() {
      if (this.county === '雨城') {
        this.tabs = [
          { label: '雨城', name: '1' },
          { label: '上里镇', name: '2' },
          { label: '碧峰峡镇', name: '3' },
          { label: '望鱼镇', name: '4' },
          { label: '周公山镇', name: '5' },
          { label: '草坝镇', name: '6' },
          { label: '多营镇', name: '7' },
          { label: '八步镇', name: '8' },
          { label: '晏场镇', name: '9' },
          { label: '大兴街道', name: '10' },
          { label: '东城街道', name: '11' },
          { label: '西城街道', name: '12' },
          { label: '河北街道', name: '13' },
          { label: '青江街道', name: '14' }
        ];
      } else if (this.county === '名山') {
        this.tabs = [
          { label: '名山', name: '1' },
          { label: '蒙阳街道', name: '2' },
          { label: '永兴街道', name: '3' },
          { label: '万古镇', name: '4' },
          { label: '百丈镇', name: '5' },
          { label: '茅河镇', name: '6' },
          { label: '马岭镇', name: '7' },
          { label: '红星镇', name: '8' },
          { label: '新店镇', name: '9' },
          { label: '前进镇', name: '10' },
          { label: '中峰镇', name: '11' },
          { label: '蒙顶山镇', name: '12' },
          { label: '黑竹镇', name: '13' },
          { label: '车岭镇', name: '14' }
        ];
      } else if (this.county === '天全') {
        this.tabs = [
          { label: '天全', name: '1' },
          { label: '始阳镇', name: '2' },
          { label: '思经镇', name: '3' },
          { label: '喇叭河镇', name: '4' },
          { label: '仁义镇', name: '5' },
          { label: '小河镇', name: '6' },
          { label: '新场镇', name: '7' },
          { label: '城厢镇', name: '8' },
          { label: '乐英镇', name: '9' },
          { label: '新华镇', name: '10' },
          { label: '兴业乡', name: '11' }
        ];
      } else if (this.county === '芦山') {
        this.tabs = [
          { label: '芦山', name: '1' },
          { label: '芦阳街道', name: '2' },
          { label: '大川镇', name: '3' },
          { label: '飞仙关镇', name: '4' },
          { label: '双石镇', name: '5' },
          { label: '太平镇', name: '6' },
          { label: '宝盛乡', name: '7' },
          { label: '龙门乡', name: '8' },
          { label: '思延乡', name: '9' }
        ];
      } else if (this.county === '宝兴') {
        this.tabs = [
          { label: '宝兴', name: '1' },
          { label: '陇东镇', name: '2' },
          { label: '穆坪镇', name: '3' },
          { label: '灵关镇', name: '4' },
          { label: '五龙镇', name: '5' },
          { label: '大溪镇', name: '6' },
          { label: '蜂桶寨乡', name: '7' },
          { label: '硗碛藏族乡', name: '8' }
        ];
      } else if (this.county === '荥经') {
        this.tabs = [
          { label: '荥经', name: '1' },
          { label: '严道街道', name: '2' },
          { label: '花滩镇', name: '3' },
          { label: '青龙镇', name: '4' },
          { label: '荥河镇', name: '5' },
          { label: '新添镇', name: '6' },
          { label: '牛背山镇', name: '7' },
          { label: '五宪镇', name: '8' },
          { label: '龙苍沟镇', name: '9' },
          { label: '宝峰彝族乡', name: '10' },
          { label: '民建彝族乡', name: '11' },
          { label: '安靖乡', name: '12' },
          { label: '泗坪乡', name: '13' }
        ];
      } else if (this.county === '汉源') {
        this.tabs = [
          { label: '汉源', name: '1' },
          { label: '大树镇', name: '2' },
          { label: '安乐镇', name: '3' },
          { label: '九襄镇', name: '4' },
          { label: '前域镇', name: '5' },
          { label: '富庄镇', name: '6' },
          { label: '宜东镇', name: '7' },
          { label: '唐家镇', name: '8' },
          { label: '乌斯河镇', name: '9' },
          { label: '皇木镇', name: '10' },
          { label: '富林镇', name: '11' },
          { label: '清溪镇', name: '12' },
          { label: '富泉镇', name: '13' },
          { label: '富乡乡', name: '14' },
          { label: '马烈乡', name: '15' },
          { label: '河南乡', name: '16' },
          { label: '晒经乡', name: '17' },
          { label: '小堡藏族彝族乡', name: '18' },
          { label: '坭美彝族乡', name: '19' },
          { label: '永利彝族乡', name: '20' },
          { label: '顺河彝族乡', name: '21' },
          { label: '片马彝族乡', name: '22' }
        ];
      } else if (this.county === '石棉') {
        this.tabs = [
          { label: '石棉', name: '1' },
          { label: '新棉街道', name: '2' },
          { label: '安顺场镇', name: '3' },
          { label: '回隆镇', name: '4' },
          { label: '美罗镇', name: '5' },
          { label: '王岗坪彝族藏族乡', name: '6' },
          { label: '永和乡', name: '7' },
          { label: '迎政乡', name: '8' },
          { label: '丰乐乡', name: '9' },
          { label: '蟹螺藏族乡', name: '10' },
          { label: '新民藏族彝族乡', name: '11' },
          { label: '草科藏族乡', name: '12' },
          { label: '栗子坪彝族乡', name: '13' }
        ];
      }
    },
    fetchData(city) {
      Request
        .get('/weatherforecast/weatherforecast7Days', {
          params: {
            county: city.label
          }
        })
        .then((response) => {
          this.weatherData = response.data.data;
          console.log(this.weatherData);
          this.updateChart();  
  
        })
        .catch((error) => {
          console.error("Error fetching weather data:", error);
        });
    },
    setNextSevenDays() {
      const today = new Date();
      this.nextSevenDays = [];
      for (let i = 1; i <= 7; i++) {
        const nextDay = new Date(today);
        nextDay.setDate(today.getDate() + i);
        this.nextSevenDays.push(
          `${nextDay.getMonth() + 1}月${nextDay.getDate()}日`
        );
      }
    },
    getWeatherIcon(weather) {
      const weatherIcons = {
        "晴": require('@/assets/weatherIcon/晴.png'),
        "阴天": require('@/assets/weatherIcon/阴天.png'),
        "小雨": require('@/assets/weatherIcon/小雨.png'),
        "中雨": require('@/assets/weatherIcon/中雨.png'),
        "大雨": require('@/assets/weatherIcon/大雨.png'),
        "阵雨": require('@/assets/weatherIcon/阵雨.png'),
        "多云": require('@/assets/weatherIcon/多云.png'),
      };
      return weatherIcons[weather];
    },
    updateChart() {
      const option = {
        backgroundColor: '#0c2340',
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['最高温', '最低温'],
          right: '4%',
          bottom: '5%',
          textStyle: {
          color: '#fff' 
            }
        },
        xAxis: {
          type: 'category',
          data: this.nextSevenDays,
          axisLine: { lineStyle: { color: '#aaa' } },
          axisLabel: { color: '#fff' },
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 32.5,
          interval: 2.5,
          axisLabel: {
            color: '#fff' ,
            formatter: '{value} °C'
          },
          axisLine: { lineStyle: { color: '#aaa' } },
          splitLine: { lineStyle: { color: '#444' } },
        },
        series: [
          {
            name: '最高温',
            type: 'line',
            smooth: true,
            data: this.weatherData.temperatureHighest,
            smooth: true, 
            lineStyle: { color: '#ffae57' }, 
            itemStyle: { color: '#ffae57' },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            },
            itemStyle: {
              color: 'red'
            }
          },
          {
            name: '最低温',
            type: 'line',
            smooth: true,
            data: this.weatherData.temperatureLowest,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };

      this.chart.setOption(option);
    },
    initChart() {
      const chartDom = document.getElementById('forecast-chart');
      this.chart = echarts.init(chartDom);

      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['最高温', '最低温'],
          right: '4%',
          bottom: '5%'
        },
        xAxis: {
          type: 'category',
          data: this.nextSevenDays
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 32.5,
          interval: 2.5,
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: '最高温',
            type: 'line',
            smooth: true,
            data: [0, 0, 0, 0, 0, 0, 0],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            },
            itemStyle: {
              color: 'red'
            }
          },
          {
            name: '最低温',
            type: 'line',
            smooth: true,
            data: [0, 0, 0, 0, 0, 0, 0],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };

      this.chart.setOption(option);
    },
    queryForecast() {
      this.fetchData(this.selectedCity);
    },
    handleTabSelect(index) {
    this.activeTab = index; 
    this.selectedCity = { value: index, label: this.tabs.find(tab => tab.name === index).label };
    this.queryForecast();
  },
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

.contain {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  background-size: cover;
  width: 90%;
  height: 100%;
}

.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  padding-top: 10px;
  flex-wrap: wrap; 
}

.header .el-select {
  margin-right: 10px;
  margin-left: 20px;
}

.header .query-button {
  margin-left: 5px;
  margin-bottom: 10px;
}



.title {
  font-size: 20px;
  font-weight: bold;
  color: white;
  margin-bottom: 10px; 
}


.weather-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  padding: 0 20px;
  margin-bottom: 20px;
}

.weather-item {
  flex: 1 1 100px;
  text-align: center;
  margin: 10px;
  color: white;
}

.weather-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
  margin-top: 20px;
}

#forecast-chart {
  width: 90%;
  height: 400px;
  margin-top: 20px;
}

.el-submenu-demo {
  background-color: transparent; 
  color: white;
  font-weight: bold;
}

.el-submenu-demo .el-menu-item {
  color: white; 
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.el-submenu-demo .el-menu-item:hover {
  color: #1f78b4; 
  border-bottom: 2px solid #1f78b4; 
  background-color: transparent;
}

.el-submenu-demo .el-menu-item.is-active {
  color: #1f78b4;
  border-bottom: 2px solid #1f78b4; 
  background-color: transparent;
}

.tabs {
  width:auto;
}
@media (max-width: 768px) {
  .title {
    font-size: 16px;
  }

  .weather-item {
    font-size: 16px;
  }

  .weather-icon {
    width: 60px;
    height: 60px;
  }
  #forecast-chart  {
    height: 50vh;
  }
  .header {
  width: 100%;

}
}
@media (max-width: 480px) {

  #forecast-chart  {
    height: 40vh;
  }
  .tabs {
  width: 100%;

}
}


</style>
